<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        .wrap {
          display: inline-block;
          border: 2px solid red;
        }
        .box {
          width: 200px; /* 内容宽 */
          height: 100px;
          /* 边框 */
          border: 20px solid blue; 
          padding: 50px; /* 内边距 */
          background-color: khaki;
        }
        .mask {
          /* 添加兼容型前缀 */
          -webkit-mask-image: url("/src/img/css3/star.png");
          /* 图片为上图提供的纯黑色的五角星 */
          mask-image: url("/src/img/css3/star.png");
          /* mask-repeat:no-repeat;  遮罩图像重复度 */
          mask-position: 0 0; /* 遮罩层背景图居中 */
          mask-clip: border-box; /* 遮罩图像延伸区域 */
        }
      </style>

<!--
        mask-clip   属性值	说明	渲染效果
        border-box	默认值。 遮罩效果会延伸到边框区域	image-20250525180154494
        padding-box	遮罩效果会延伸到内边距区域	image-20250525180434151
        content-box	遮罩效果只延伸到内容区域	image-20250525180513763
-->

      <div class="wrap">
        <div class="box mask"></div>
      </div>
</body>
</html>